<template>
    <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="水厂当前状态" name="first">
        <el-table
            :data="tableData"
            border
            style="width: 100%">
          <el-table-column
            prop="name"
            label="水厂名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="waterPumpsInfo"
            label="开泵状态"
            width="180">
            <template slot-scope="scope">
                <el-button
                    v-for="item in scope.row.waterPumpsInfo"
                    :key="item.id"
                    type="text"
                    size="small">
                    {{item.isOpen?1:0}}
                </el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="totalFlow"
            label="总供水量(m3/h)"
            width="180">
          </el-table-column>
           <el-table-column
            prop="pressures"
            label="供水压力(MPa)"
            width="180">
            <template slot-scope="scope">
                <el-button
                    v-for="item in scope.row.pressures"
                    :key="item"
                    type="text"
                    size="small">
                    {{item}}
                </el-button>
            </template>
          </el-table-column>
        </el-table>

    </el-tab-pane>
    <el-tab-pane label="水厂历史状态" name="second">
        <el-row class="toolbar">
              <DatePicker
                :options="options"
                :getData="getData"
              >
              </DatePicker>
            <img class="my-btn"
                v-if="showValue"
                style="width:25px;height:25px"
                src="../../assets/icons/line.png"
                @click="changeToTable">
            <img class="my-btn"
                v-else style="width:35px;height:35px"
                src="../../assets/icons/table.png"
                @click="changeToLine">
            <el-button type="primary" v-if="!showValue" @click="exportExcel">导出</el-button>
        </el-row>
        <el-container v-if="showValue">

        </el-container>
         <el-container v-else>
            <el-table
                :data="historyTableData"
                style="width:100%">
                <el-table-column
                    prop="date"
                    label="时间"
                    width="150">
                </el-table-column>
                <el-table-column
                    v-for="item in historyTableData"
                    :label="item.name"
                    :key="item.id">
                    <el-table-column
                        v-for="item1 in item.waterPumpsInfo"
                        :label="item1.name"
                        :key="item1.id"
                        width="120">
                        <template slot-scope="scope">
                          <span>{{item1.openStatusHistory[0].isOpen?1:0}}</span>
                        </template>
                    </el-table-column>
                </el-table-column>
            </el-table>
        </el-container>
    </el-tab-pane>
    <el-tab-pane label="调度指令统计" name="third">
         <el-row class="toolbar">
              <DatePicker
                :options="options"
                :getData="getData"
              >
              </DatePicker>
            <el-button type="primary" v-if="!showValue" @click="exportExcel">导出</el-button>
        </el-row>
         <el-table
            :data="dispatchTableData"
            border
            style="width: 100%">
          <el-table-column
            prop="time"
            label="时间"
            width="180">
          </el-table-column>
          <el-table-column
            prop="waterPumpsInfo"
            label="指令内容"
            width="180">
            <template slot-scope="scope">
                <el-button
                    v-for="item in scope.row.waterPumpsInfo"
                    :key="item.id"
                    type="text"
                    size="small">
                    {{item.isOpen?1:0}}
                </el-button>
            </template>
          </el-table-column>
          <el-table-column
            prop="totalFlow"
            label="执行部门"
            width="180">
          </el-table-column>
           <el-table-column
            prop="pressures"
            label="执行时长"
            width="180">
          </el-table-column>
          <el-table-column
            prop="pressures"
            label="备注"
            width="180">
          </el-table-column>
        </el-table>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import ECharts from 'vue-echarts/components/ECharts'
import formRequest from './formRequest.js'
import moment from 'moment'
import 'echarts/lib/chart/gauge'
import 'echarts/lib/chart/line'
import DatePicker from '../../components/DatePicker.vue'

export default {
  components: {
    'v-chart': ECharts,
    DatePicker
  },
  mounted () {
    this.getWaterFactoryDetail()
    this.getWaterPumpsHistoryData()
  },
  data () {
    return {
      activeName: 'first',
      tableData: [],
      historyTableData: [],
      dispatchTableData: [],
      dateRange: [],
      showValue: true,
      startTime: '',
      endTime: '',
      options: [
        {
          text: '最近一天',
          range: [moment().subtract(1, 'D').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
        }, {
          text: '最近一月',
          range: [moment().subtract(1, 'M').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
        }, {
          text: '最近一年',
          range: [moment().subtract(1, 'y').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
        }]
    }
  },
  methods: {
    exportExcel () {
      const end = new Date().getTime()
      const start = end - 3600 * 1000 * 24 * 1
      let params = {
        startTime: start,
        endTime: end
      }
      formRequest('/dispatch/dispatchOrder/waterpumps/openStatus/historyData', params)
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    getWaterFactoryDetail () {
    //   let params = {
    //     waterworksInfos: {

    //     }
    //   }
    //   this.$get('/dispatch/dispatchOrder/waterworksInfo', params)
    //     .then(res => {
    //       if (res.code === 0) {
    //         this.tableData = res.data.waterworksInfos
    //       }
    //     })
      this.tableData = [
        {
          'id': 12345,
          'name': '三坪水厂',
          'totalFlow': 12345,
          'waterPumpsInfo': [
            {
              'id': 12345,
              'isOpen': true
            },
            {
              'id': 12346,
              'isOpen': false
            }],
          'pressures': [0.89, 0.91]
        }
      ]
    },
    getDateHistoryStatus () {
      let params = {
        startTime: this.dateRange[0],
        endTime: this.dateRange[0]
      }
      this.getWaterPumpsHistoryDataByParams(params)
    },
    changeToTable () {
      this.showValue = false
    },
    changeToLine () {
      this.showValue = true
    },
    getWaterPumpsHistoryData () {
    //   let params = {
    //     startTime: this.dateRange[0],
    //     endTime: this.dateRange[1]
    //   }
    //   this.getWaterPumpsHistoryDataByParams(params)
      let data = [
        {
          id: 12345,
          name: '三坪水厂',
          waterPumpsInfo: [
            {
              id: 12365,
              name: '1#',
              openStatusHistory: [
                {
                  isOpen: true,
                  time: '2018/10/1'
                },
                {
                  isOpen: true,
                  time: '2018/10/2'
                }
              ]
            },
            {
              id: 12367,
              name: '2#',
              openStatusHistory: [
                {
                  isOpen: true,
                  time: '2018/10/1'
                },
                {
                  isOpen: false,
                  time: '2018/10/2'
                }
              ]
            }]
        },
        {
          id: 1234544,
          name: '三坪水厂2',
          waterPumpsInfo: [
            {
              id: 12365,
              name: '1#',
              openStatusHistory: [
                {
                  isOpen: true,
                  time: '2018/10/1'
                },
                {
                  isOpen: true,
                  time: '2018/10/2'
                }
              ]
            },
            {
              id: 12367,
              name: '2#',
              openStatusHistory: [
                {
                  isOpen: true,
                  time: '2018/10/1'
                },
                {
                  isOpen: false,
                  time: '2018/10/2'
                }
              ]
            }]
        }
      ]
      this.historyTableData = data
    },
    getWaterPumpsHistoryDataByParams (params) {
      this.$get('/dispatch/dispatchOrder/waterpumps/openStatus/historyData', {params})
        .then(res => {
          if (res.code === 0) {
            this.historyTableData = res.data.waterworksInfos
          }
        })
    }
  }
}

</script>

<style lang="sass" scoped>
 .toolbar
    position: relative;
    .my-btn
      position: absolute;
      top: 0;
      right: 0;
      margin: 0 10px;
</style>
